<template>
	<view>
		<view class="gk-search">
			<u-search placeholder="请输入组织名称关键词..." bgColor="#ffffff" v-model="keyword" :clearabled="true"
				:showAction="false"></u-search>
			<u-button><u-icon name="plus" color="#1095db" size="13"
					style="margin-right: 10rpx;font-size: 26rpx;"></u-icon>创建组织</u-button>
		</view>
		<u-tabs :list="list" @click="click"></u-tabs>
		<view class="sort-content">
			<view>共有115个组织</view>
			<view class="sort">
				<view v-for="(item,index) in sort" :key="index" class="sort-item"
					:class="index==sortIndex?'sort-active':''" @click="handleSort(index)">{{item.title}}</view>
			</view>
		</view>
		<view class="org-list">
			<view class="org-item" v-for="(item,index) in orgList" :key="index">
				<view class="org-info">
					<img src="../../static/images/logo.png" alt="" class="org-logo" />
					<view class="org-content">
						<view style="font-size: 28rpx;">{{item.name}}</view>
						<view style="color: #999999;font-size: 24rpx;">活动:{{item.activityCount}} 成员:{{item.memberCount}}</view>
						<view style="color: #999999;display: flex;align-items: center;font-size: 24rpx;">活跃度：<u-rate count="5" v-model="item.activation"></u-rate></view>
					</view>
				</view>
				<u-button >加入</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import mock from './mock';
	export default {
		data() {
			return {
				keyword: "",
				list: [{
						name: '全部',
					}, {
						name: '我的组织',
					}, {
						name: '校友总会'
					}, {
						name: '地方校友联谊会'
					},
					{
						name: '学院校友分会'
					},
					{
						name: '行业校友联谊会'
					},
				],
				sort: [{
						title: "活跃度"
					},
					{
						title: "成员数"
					},
				],
				sortIndex: 0,
				orgList:[
					
				]
			};
		},
		onLoad() {
			mock.data.rows.forEach(item=>{
				item.activation = (item.activation/20).toFixed(0)
			})
				this.orgList = mock.data.rows
		},
		methods: {
			click(item) {
				console.log('item', item);
			},
			handleSort(index) {
				this.sortIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gk-search {
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f2f2f2;

		.u-button {
			width: 170rpx;
			margin-left: 20rpx;
			height: 34px;
			color: #1095db;
			padding: 0;
			font-size: 26rpx;
			border: none;
		}
	}

	.sort-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		.sort {
			display: flex;
			align-items: center;

			.sort-item:first-child {
				border-right: none;
				border-top-left-radius: 40px;
				border-bottom-left-radius: 40px;
			}

			.sort-item:last-child {
				border-left: none;
				border-top-right-radius: 40px;
				border-bottom-right-radius: 40px;
			}

			.sort-item {
				border: 1px solid #999999;
				padding: 4px 10px;
				font-size: 24rpx;
				color: #999999;
			}

			.sort-active {
				background-color: #1095db;
				color: #ffffff;
				border-color: #1095db;
			}
		}
	}

	.org-list {
		.org-item {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f2f2f2;
			.org-info {
				display: flex;
				align-items: stretch;

			}

			.org-content {
				padding-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.org-logo {
				width: 140rpx;
			}

			.u-button {
				width: 90rpx;
				margin-right: 0;
				border-color: #1095db;
				height: 25px;
				color: #1095db;
				padding: 0;font-size: 26rpx;
			}
		}
	}
</style>